<template>
    <div id="notice-box" @touchmove.prevent>
        <div class="notice-con">
            <div class="notice-border">
                <Title>{{titles[type]}}</Title>
                <div v-html='notices[type]'></div>
            </div>
        </div>
        <img src="../../assets/img/close.png" alt="" srcset="" class="close-btn" @click="close">
    </div>
</template>

<script>
import Title from "../title"
export default {
    name: 'BlNotice',
    components: {
        Title
    },
    data() {
        return {
            show: true,
            type:'',
            titles:{
                'join':'投稿规则',
                'award':'评奖规则',
                'vote': '投票规则'
            },
            notices:{
                'join':'1.视频时长1分钟～10分钟，画面清晰。<br> 2.视频需为原创视频。<br> 3.同一视频不能由多人提交，重复参与。视频如由多位车友共同创作，只能由一人提交。如视频获奖，奖品发送给作品提交车友。<br> 4.车友可投稿多个视频，但最终评选时仅计算最高热度的视频。<br> 5.活动期间，若删除视频，视为主动放弃参与活动。<br> 6.视频需符合相关法律法规。<br> 7.本活动解释权归越野侠所有，如有问题请联系官方客服。'
                ,'award': '1.投稿参加活动，海选时间结束后，根据视频的热度（点赞数、评论数、转发数、收藏数和视频质量计算得出）评选前10名的视频进行投票。<br>2.投票结束后，根据视频的投票数和热度计算出前三名。<br>3.入选前10名车友根据最终的排名可获得不同奖励。<br>4.排名公布后，官方客服将联系获奖车友获取寄件地址和联系方式，获奖车友也可主动官方客服。若客服1月内未能成功联系上车友，视为主动放弃奖品。'
                ,'vote': '1.每位车友每日可投3票，不能给自己的视频投票。<br>2.严禁刷票，一旦发现存在刷票行为，取消参赛资格。<br> 3.本活动解释权归越野侠所有，如有问题请联系官方客服。'
            }
        }
    },
    methods: {
        close(){
            this.show = false
        }
    },
    watch:{
        show(cur) {
            if (cur === false) {
                const pop = document.getElementById('notice-box')
                pop.parentNode.removeChild(pop)
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
    #notice-box
        width 100%
        height 100%
        background rgba(0,0,0,0.7)
        position fixed
        top 0
        left 0
        color #fff
        z-index 999
        display flex
        flex-direction column
        align-items center
        justify-content center
        .notice-con
            width 80%
            color #FFEBD7
            font-size 14px
            line-height 24px
            background $theme-color-deeper
            box-sizing border-box
            padding 10px
            border-radius 8px
            .notice-border
                border 12px solid transparent
                border-image url('../../assets/img/border_red.png') 24 round
                box-sizing border-box
                padding 0px 5px 10px 
        .close-btn
            display block
            width 32px
            height 32px
            margin-top 20px
            pointer-events auto 

</style>